<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script>
        function f1(){
            alert("这是静态绑定的事件")
        }
        // 页面加载事件,当页面加载完成之后触发
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                alert("在页面加载完成之后进行动态绑定")
            }
        }
        function f2(){
            console.log("鼠标按钮被按下")
        }
        function f3(){
            console.log("鼠标按钮被松开");
        }
        function f4(){
            console.log("键盘上某个键被按下,识别任何键")
        }
        function f5(){
            console.log("键盘上某个键被按下,不识别功能键")
        }
        function f6(){
            console.log("键盘上某个键被松开")
        }
    </script>
</head>
<body>
<!-- 静态绑定:在HTML元素上通过事件句柄属性绑定事件 -->
<button onclick="f1()">静态绑定</button>
<!-- 动态绑定:在js代码中通过DOM对象绑定事件 -->
<button id="btn">动态绑定</button>
<button onmousedown="f2()" onmouseup="f3()">鼠标事件</button>
<input type="text" onkeydown="f4()" onkeypress="f5()" onkeyup="f6()">
<script>
    // document.getElementById("btn").onclick = function(){
    //     alert("这是动态绑定的事件")
    // }
</script>
</body>
</html>